<template>
	<view class="content">
		<view class="title">订单编号：<text class="val">{{info.sn_code}}</text> </view>
		<view class="info">
			<view class="title">客户信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="val">
				<text>公司名称</text>
				<text>{{supplier.name}}</text>
			</view>
			<view class="val">
				<text>项目名称</text>
				<text>{{info.project_name}}</text>
			</view>
			<view class="val">
				<text>发货联系人</text>
				<text>{{supplier.legal_representative}}</text>
			</view>
			<view class="val">
				<text>联系电话</text>
				<text>{{supplier.contact_number}}</text>
			</view>
			<view class="val">
				<text>发货地址</text>
				<text>{{info.beg_land}}</text>
			</view>
		</view>
		<view class="info">
			<view class="title">收货人信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="val">
				<text>收货人</text>
				<text>{{info.consignee}}</text>
			</view>
			<view class="val">
				<text>联系电话</text>
				<text>{{info.consignee_phone}}</text>
			</view>
			<view class="val">
				<text>收货地址</text>
				<text>{{info.consignee_address}}</text>
			</view>
		</view>
		<view class="info">
			<view class="title">计划时间 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="val">
				<text>计划装货时间</text>
				<text>{{info.plan_beg_date}}</text>
			</view>
			<view class="val">
				<text>计划到货时间</text>
				<text>{{info.plan_end_date}}</text>
			</view>
		</view>
		<!-- <view class="info" v-if="info.signer_status==2">
			<view class="imgbox">
				<view class="title">
					<text>请上传卸货单附件</text>
					<view class="icon iconfont icon-guanyu"></view>
				</view>
				<view class="file" v-for="(item,index) in imgurl" :key='index'>
					<view class="url">{{item}}</view>
					<button class="btn" @tap="openurl(item)">查看</button>
					<button class="btn" @tap="del(index,1)">删除</button>
				</view>
				<view class="upload">
					<view class="img">
						<uni-icons type="plusempty" size="60" color="#f7f7f7" @tap="choosefile(1)"></uni-icons>
					</view>
				</view>
			</view>
		</view> -->
		<view class="info" v-if="info.real_url">
			<view class="title">装货单信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file" v-for="(item,index) in info.real_url" :key='index'>
				<view class="url">{{item}}</view>
				<button class="btn" @tap="openurl(item)">查看</button>
			</view>
		</view>
		<view class="info" v-if="info.file_url">
			<view class="title">卸货单信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file" v-for="(item,index) in info.file_url" :key='index'>
				<view class="url">{{item}}</view>
				<button class="btn" @tap="openurl(item)">查看</button>
			</view>
		</view>
		<view class="info fixedbtn" v-if="info.signer_status==2">
			<view class="btnbox">
				<chenzuheng-verify-slider @result='verifyResult' ref="verifyElement"></chenzuheng-verify-slider>
			</view>
		</view>
	</view>
</template>

<script setup>
	import ChenzuhengVerifySlider from '@/uni_modules/chenzuheng-verify-slider/components/chenzuheng-verify-slider/chenzuheng-verify-slider.vue'
	import {
		getOrderDetail,
		orderArrive
	} from '../../network/index.js';
	import uploadUrl from '../../network/utils.js';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	onLoad((res) => {
		id.value = res.id
		getDetail(res.id)
	})
	const id = ref('')
	const info = reactive({})
	const supplier = reactive({})
	const getDetail = (id) => {
		let data = {
			id: id
		}
		getOrderDetail(data).then(res => {
			Object.assign(info, res.data.data)
			if(info.file_url)info.file_url = JSON.parse(info.file_url)
			if(info.real_url)info.real_url = JSON.parse(info.real_url)
			Object.assign(supplier, res.data.data.supplier)
		})
	}
	const submit = () => {
		let data = {
			id: id.value
		}
		orderArrive(data).then(res => {
			uni.showToast({
				title: '已确认送达'
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 300)
		})
	}
	const verifyResult = (res) => {
		if (res.flag) {
			submit()
		}
	}

	const imgurl = reactive([])
	const choosefile = (flag) => {
		// #ifdef  APP-PLUS
		let fileTypes = ["doc", "docx", "xls", "xlsx", "pdf", "txt", "pptx"]
		let chooseFile = plus.io.chooseFile({
			title: '选择文件',
			filetypes: fileTypes,
			multiple: false
		}, (e) => {
			uni.uploadFile({
				url: uploadUrl.FileUrl,
				filePath: e.files[0],
				name: 'file',
				header: {
					'token': uni.getStorageSync('token')
				},
				formData: {
					file: e.files[0]
				},
				success(response) {
					let data = JSON.parse(response.data)
					if (flag == 1) {
						imgurl.push(data.data.fullurl)
					} else {
						transfer.push(data.data.fullurl)
					}
				}
			})
		})
		// #endif
	
		// #ifndef  APP-PLUS	
		H5upload(flag)
		//#endif
	}
	const H5upload = (flag) => {
		uni.chooseFile({
			count: 1,
			complete(res) {
				uni.uploadFile({
					url: uploadUrl.uploadUrl,
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					formData: {
						file: res.tempFilePaths[0]
					},
					success(response) {
						let data = JSON.parse(response.data)
						if (flag == 1) {
							imgurl.push(data.data.fullurl)
						} else {
							transfer.push(data.data.fullurl)
						}
					}
				})
			}
		})
	}
	const openurl = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif
	
		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
	const del = (index,flag) => {
		if(flag==1){
			imgurl.splice(index, 1)
		}else{
			transfer.splice(index, 1)
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 200rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			line-height: 80rpx;
			background-color: #fff;
			padding-left: 50rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			margin-top: 2rpx;

			.icon {
				font-size: 40rpx;
				color: #ff6700;
				margin-left: 20rpx;
				font-weight: normal;
			}

			.val {
				margin-bottom: 6rpx;
				font-size: 28rpx;
				color: #333;
			}
		}



		.info {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 30rpx 0;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 60rpx;
				border-top: none;
			}

			.val {
				font-size: 28rpx;
				color: #333;
				padding: 0 50rpx;
				box-sizing: border-box;
				line-height: 50rpx;
				display: flex;
				justify-content: space-between;
			}

			.imgbox {
				background-color: #fff;

				.upload {
					display: flex;
					justify-content: flex-start;

					.img {
						width: 30%;
						height: 220rpx;
						display: inline-block;
						border: 2rpx solid #f7f7f7;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
					}
				}

				.file {
					width: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin: 10rpx 0;

					.url {
						width: 400rpx;
						font-size: 24rpx;
						color: #f6bf00;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.btn {
						width: 120rpx;
						height: 60rpx;
						font-size: 24rpx;
						line-height: 60rpx;
						text-align: center;
						background-color: #f6bf00;
					}
				}

				.title {
					margin-bottom: 30rpx;
					font-size: 32rpx;
					display: flex;
					justify-content: flex-start;
					gap: 10rpx;

					.icon {
						font-size: 36rpx;
						color: #ff6700;
						font-weight: normal;
					}
				}
			}

			.file {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 10rpx 0;

				.url {
					width: 520rpx;
					font-size: 24rpx;
					color: #f6bf00;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.btn {
					width: 120rpx;
					height: 60rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #f6bf00;
					margin: 0;
				}
			}
		}
	}

	.fixedbtn {
		width: 100%;
		border-top: 2rpx solid #f7f7f7;
		position: fixed;
		bottom: 0;
		left: 0;

		.btnbox {
			width: 100%;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;

			.btn {
				width: 200rpx;
				height: 60rpx;
				background-color: #f8f8f8;
				line-height: 60rpx;
				text-align: center;
				border-radius: 12rpx;
				font-size: 26rpx;
			}

			.search {
				background-color: #ffc400;
			}
		}
	}
</style>